import './DubboProjectCard.scss';
import React, { PureComponent as Component } from 'react';
import { Card, Icon } from 'antd';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import { debounce } from '../../common';
import constants from '../../constants/variable.js';
import { getProject, checkProjectName } from '../../reducer/modules/dubboProject';

@connect(
  state => {
    return {
      uid: state.user.uid,
      currPage: state.project.currPage
    };
  },
  {
    getProject,
    checkProjectName
  }
)
@withRouter
class DubboProjectCard extends Component {
  constructor(props) {
    super(props);
    this.add = debounce(this.add, 400);
    this.del = debounce(this.del, 400);
  }

  static propTypes = {
    dubboProjectData: PropTypes.object,
    uid: PropTypes.number,
    callbackResult: PropTypes.func,
    history: PropTypes.object,
    getProject: PropTypes.func,
    checkProjectName: PropTypes.func,
    currPage: PropTypes.number
  };

  render() {
    const { dubboProjectData } = this.props;
    return (
      <div className="card-container">
        <Card
                bordered={false}
                className="m-card"
                onClick={() =>
                    this.props.history.push('/dubboproject/' + (dubboProjectData.projectid || dubboProjectData._id))
                }
            >
          <Icon
                    type={dubboProjectData.icon || 'star-o'}
                    className="ui-logo"
                    style={{
                        backgroundColor:
                        constants.PROJECT_COLOR[dubboProjectData.color] || constants.PROJECT_COLOR.blue
                    }}
                />
          <h4 className="ui-title">{dubboProjectData.cnname}</h4>
        </Card>
      </div>
    );
  }
}

export default DubboProjectCard;
